<template>
    <div class="notification-container">
      <!-- 顶部标题 -->
      <div class="notification-header">
        <div class="title">消息通知</div>
      </div>
  
      <!-- 消息分类 -->
      <div class="notification-categories">
        <div 
          v-for="(category, index) in categories" 
          :key="index"
          class="category-item" 
          :class="{ active: activeCategory === category.type }"
          @click="changeCategory(category.type)">
          <i :class="category.icon"></i>
          <span>{{ category.name }}</span>
        </div>
      </div>
  
      <!-- 消息列表 -->
      <div class="notification-list">
        <!-- 日期分组 -->
        <template v-if="filteredNotifications.length > 0">
          <div v-for="(group, groupIndex) in groupedNotifications" :key="groupIndex" class="date-group">
            <div class="date-label">{{ group.date }}</div>
            
            <!-- 消息项 -->
            <div 
              v-for="(notification, notificationIndex) in group.items" 
              :key="notificationIndex" 
              class="notification-item">
              <div class="avatar">
                <el-avatar :size="40" :src="notification.avatar"></el-avatar>
              </div>
              <div class="content">
                <div class="message">
                  <span class="username">{{ notification.username }}</span>
                  <span class="action">{{ notification.action }}</span>
                  <span v-if="notification.noteTitle" class="note-title">《{{ notification.noteTitle }}》</span>
                </div>
                <div v-if="notification.commentContent" class="comment-content">{{ notification.commentContent }}</div>
                <div class="time">{{ notification.time }}</div>
              </div>
              <div v-if="notification.noteCover" class="note-cover">
                <el-image 
                  style="width: 50px; height: 50px;"
                  :src="notification.noteCover"
                  fit="cover"
                  @click="viewNote(notification.noteId)">
                </el-image>
              </div>
              <div v-if="notification.type === 'follow'" class="follow-button">
                <el-button 
                  size="mini" 
                  :type="notification.isFollowed ? 'info' : 'danger'" 
                  round
                  @click="handleFollow(notification)">
                  {{ notification.isFollowed ? '已关注' : '回关' }}
                </el-button>
              </div>
            </div>
          </div>
        </template>
        
        <!-- 空状态 -->
        <div v-else class="empty-state">
          <i class="el-icon-bell"></i>
          <p>暂无{{ getCategoryName(activeCategory) }}消息</p>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "NotificationCenter",
    data() {
      return {
        activeCategory: 'all',
        categories: [
          { type: 'all', name: '互动消息', icon: 'el-icon-bell' },
          { type: 'comment', name: '评论', icon: 'el-icon-chat-dot-round' },
          { type: 'like', name: '赞和收藏', icon: 'el-icon-star-on' },
          { type: 'follow', name: '新增关注', icon: 'el-icon-user' },
          { type: 'system', name: '系统通知', icon: 'el-icon-s-promotion' }
        ],
        notifications: [
          {
            id: 1,
            type: 'like',
            username: '小红薯',
            avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
            action: '赞了你的笔记',
            noteTitle: '这是我的第一篇笔记',
            noteId: 101,
            noteCover: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
            time: '10:30',
            date: '今天'
          },
          {
            id: 2,
            type: 'comment',
            username: '番茄炒蛋',
            avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
            action: '评论了你的笔记',
            noteTitle: '分享我的购物心得',
            noteId: 102,
            noteCover: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
            commentContent: '这个推荐太棒了，我也想买！',
            time: '09:15',
            date: '今天'
          },
          {
            id: 3,
            type: 'system',
            username: '系统通知',
            avatar: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
            action: '你的笔记获得了官方推荐',
            noteId: 101,
            noteCover: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
            time: '昨天 15:42',
            date: '昨天'
          },
          {
            id: 4,
            type: 'follow',
            username: '小红薯',
            avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
            action: '关注了你',
            time: '昨天 11:20',
            date: '昨天',
            isFollowed: false
          },
          {
            id: 5,
            type: 'like',
            username: '番茄炒蛋',
            avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
            action: '收藏了你的笔记',
            noteTitle: '这是我的第一篇笔记',
            noteId: 101,
            noteCover: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
            time: '3天前',
            date: '更早'
          }
        ]
      };
    },
    computed: {
      // 根据当前选中的分类过滤通知
      filteredNotifications() {
        if (this.activeCategory === 'all') {
          return this.notifications;
        } else {
          return this.notifications.filter(item => item.type === this.activeCategory);
        }
      },
      
      // 按日期分组通知
      groupedNotifications() {
        const groups = {};
        
        this.filteredNotifications.forEach(notification => {
          if (!groups[notification.date]) {
            groups[notification.date] = {
              date: notification.date,
              items: []
            };
          }
          groups[notification.date].items.push(notification);
        });
        
        return Object.values(groups);
      }
    },
    methods: {
      // 切换消息分类
      changeCategory(type) {
        this.activeCategory = type;
        console.log('切换到分类:', this.getCategoryName(type));
      },
      
      // 获取分类名称
      getCategoryName(type) {
        const category = this.categories.find(item => item.type === type);
        return category ? category.name : '';
      },
      
      // 查看笔记详情
      viewNote(noteId) {
        this.$message.info(`查看笔记 ${noteId} 详情`);
        // 实际应用中，这里应该跳转到笔记详情页
        // this.$router.push(`/note/${noteId}`);
      },
      
      // 关注/取消关注用户
      handleFollow(notification) {
        // 切换关注状态
        notification.isFollowed = !notification.isFollowed;
        
        // 显示操作结果
        this.$message.success(notification.isFollowed ? 
          `已成功关注 ${notification.username}` : 
          `已取消关注 ${notification.username}`);
        
        // 实际应用中，这里应该调用API进行关注/取消关注操作
        console.log('关注状态变更:', notification.username, notification.isFollowed);
      },
      
      // 加载通知数据
      loadNotifications() {
        // 实际应用中，这里应该调用API获取通知数据
        console.log("加载通知数据");
      }
    }
  };
  </script>
  
  <style scoped>
  .notification-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    min-height: 100vh;
  }
  
  .notification-header {
    padding: 10px 0;
    margin-bottom: 20px;
    text-align: center;
  }
  
  .notification-header .title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }
  
  .notification-categories {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 10px;
    border-radius: 8px;
    transition: all 0.3s;
  }
  
  .category-item i {
    font-size: 22px;
    margin-bottom: 5px;
    color: #999;
  }
  
  .category-item span {
    font-size: 12px;
    color: #666;
  }
  
  .category-item.active {
    background-color: #fef0f0;
  }
  
  .category-item.active i,
  .category-item.active span {
    color: #ff2442;
  }
  
  .category-item:hover {
    background-color: #f8f8f8;
  }
  
  .notification-list {
    padding: 10px 0;
  }
  
  .date-group {
    margin-bottom: 20px;
  }
  
  .date-label {
    font-size: 14px;
    color: #999;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 10px;
  }
  
  .notification-item {
    display: flex;
    padding: 15px 0;
    border-bottom: 1px solid #f5f5f5;
  }
  
  .notification-item .avatar {
    margin-right: 15px;
  }
  
  .notification-item .content {
    flex: 1;
  }
  
  .notification-item .message {
    margin-bottom: 5px;
    line-height: 1.5;
  }
  
  .notification-item .username {
    font-weight: bold;
    color: #333;
    margin-right: 5px;
  }
  
  .notification-item .action {
    color: #666;
  }
  
  .notification-item .note-title {
    color: #999;
  }
  
  .notification-item .comment-content {
    background-color: #f8f8f8;
    padding: 8px 12px;
    border-radius: 4px;
    margin: 5px 0;
    color: #666;
    font-size: 13px;
  }
  
  .notification-item .time {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
  }
  
  .notification-item .note-cover,
  .notification-item .follow-button {
    display: flex;
    align-items: center;
    margin-left: 15px;
  }
  
  .notification-item .note-cover {
    cursor: pointer;
  }
  
  .notification-item .el-image {
    border-radius: 4px;
    overflow: hidden;
  }
  
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    color: #999;
  }
  
  .empty-state i {
    font-size: 50px;
    margin-bottom: 15px;
    color: #ddd;
  }
  
  /* 响应式设计 */
  @media screen and (max-width: 768px) {
    .notification-categories {
      overflow-x: auto;
      justify-content: flex-start;
    }
    
    .category-item {
      margin-right: 15px;
      min-width: 60px;
    }
    
    .notification-item {
      flex-wrap: wrap;
    }
    
    .notification-item .note-cover {
      margin-left: 55px;
      margin-top: 10px;  
    }
  }
  </style>
  